<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影和渐变属性</title>
    <link rel="stylesheet" href="../CSS/13.1.css">
</head>
<body>
<article>
    <aside>
        <h1>本期讲解关于阴影和渐变属性相关的标签</h1>
        <p>首先是阴影，阴影属性的标签是：box-shadow</p>
        <p>完整的语法是：box-shadow: 水平偏移量 垂直偏移量 模糊半径 扩展半径 阴影的颜色 类型</p>
        <p>前两个属性是必填项，后面四个属性是可选项，如果不进行选择默认就是黑色阴影和外阴影</p>
        <h2>关于属性值的详细介绍</h2>
        <ul>
            <li>水平偏移量：正值阴影在右，负值阴影在左</li>
            <li>垂直偏移量：正值阴影在下，负值阴影在上</li>
            <li>模糊半径：只能为正值，值越大，阴影越模糊</li>
            <li>扩展半径： 正值阴影扩大，负值阴影缩小</li>
            <li>类型：默认是外阴影(outset),可以更改为内阴影(inset)</li>
        </ul>
    </aside>
    <aside>
        <h2>实操</h2>
        <div class="div1">
            设置四个选项都是10px
        </div>
        <div class="div2">
            设置模糊半径和扩展半径为0
        </div>
        <div class="div3">
            设置颜色和类型
        </div>
    </aside>
    <aside>
        <h2>box-sizing属性</h2>

    </aside>
</article>
</body>
</html>